<template>
  <!-- <div class="wpwork-common-layout"> -->
  <div class="wpwork-common-layout-center wpwork-flex-main">
    <div class="custom-radio-group">
      <label v-for="(item, index) in radioItems" :key="index" @click="handleItemClick(item)"
        :class="{ 'active': isCollapse === item.value }">
        <el-image style="width: 19px; height: 19px; margin-right: 10px;"
          :src="isCollapse === item.value ? item.activeUrl : item.normalUrl"></el-image>
        {{ item.text }}
      </label>
    </div>
    <div v-if="isCollapse === 1">
      <AllView @value-changed="handleValueChange" />
    </div>
    <!-- 事件统计 -->
    <div v-if="isCollapse === 2">
      <EventStatistics />
    </div>
    <!-- 考勤统计 -->
    <div v-if="isCollapse === 3">
      <AttendanceStatistics />
    </div>
    <!-- 任务统计 -->
    <div v-if="isCollapse === 4">
      <TaskStatistics />
    </div>
    <!-- 即时消息 -->
    <div v-if="isCollapse === 5">
      <InstantMessaging />
    </div>
    <!-- 围栏查询 -->
    <div v-if="isCollapse === 6">
      <FenceQuery />
    </div>
    <!-- 巡检统计 -->
    <div v-if="isCollapse === 7">
      <InspectionStatistics />
    </div>
    <!-- 定位统计 -->
    <div v-if="isCollapse === 8">
      <PositionStatistics />
    </div>
    <!-- 定位信息 -->
    <div v-if="isCollapse === 9">
      <PositioningInfo />
    </div>

  </div>
  <!-- </div> -->
</template>

<script>
import AllView from './AllView';
import EventStatistics from './Event';
import AttendanceStatistics from './Attendance';
import TaskStatistics from './Task';
import InstantMessaging from './Message';
import FenceQuery from './Fence';
import InspectionStatistics from './Inspection';
import PositionStatistics from './Position';
import PositioningInfo from './positioningInfo';
export default {
  name: 'statistic',
  components: {
    AllView,
    EventStatistics,
    AttendanceStatistics,
    TaskStatistics,
    InstantMessaging,
    FenceQuery,
    InspectionStatistics,
    PositionStatistics,
    PositioningInfo,
  },
  data() {
    return {
      isCollapse: 1,
      radioItems: [
        { value: 0, text: '调度平台', activeUrl: require('@/assets/images/总览.png'), normalUrl: require('@/assets/images/总览-1.png') },
        { value: 1, text: '总览', activeUrl: require('@/assets/images/总览.png'), normalUrl: require('@/assets/images/总览-1.png') },
        { value: 2, text: '事件统计', activeUrl: require('@/assets/images/事件统计.png'), normalUrl: require('@/assets/images/事件统计-1.png') },
        { value: 3, text: '考勤统计', activeUrl: require('@/assets/images/考勤统计.png'), normalUrl: require('@/assets/images/考勤统计-1.png') },
        { value: 4, text: '任务统计', activeUrl: require('@/assets/images/任务统计.png'), normalUrl: require('@/assets/images/任务统计-1.png') },
        { value: 5, text: '即时消息', activeUrl: require('@/assets/images/即时信息.png'), normalUrl: require('@/assets/images/即时信息-1.png') },
        { value: 6, text: '围栏查询', activeUrl: require('@/assets/images/围栏查询.png'), normalUrl: require('@/assets/images/围栏查询-1.png') },
        { value: 7, text: '巡检统计', activeUrl: require('@/assets/images/巡检.png'), normalUrl: require('@/assets/images/巡检-1.png') },
        { value: 8, text: '定位统计', activeUrl: require('@/assets/images/定位.png'), normalUrl: require('@/assets/images/定位-1.png') },
        { value: 9, text: '定位信息', activeUrl: require('@/assets/images/定位.png'), normalUrl: require('@/assets/images/定位-1.png') }
      ]
    }
  },
  // 1. 使用预加载
  mounted() {
    this.radioItems.forEach(item => {
      ['normalUrl', 'activeUrl'].forEach(key => {
        const img = new Image();
        img.src = item[key];
      });
    });
  },
  methods: {
    handleValueChange(value) {
      this.isCollapse = value;
    },
    handleItemClick(item) {
      if (item.value === 0) {
        const routeData = this.$router.resolve({ path: '/formShortLink' });
        window.open(routeData.href, '_blank');
      } else {
        this.isCollapse = item.value;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.custom-radio-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  // margin-top: 10px;
  color: #444444;

  .title {
    font-size: 14px;
    color: #606266;
    margin-right: 20px;
  }

  .container {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    min-height: 400px;
  }

  label {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;

    i {
      margin-right: 8px;
      font-size: 16px;
    }

    &.active {
      background-color: #e8f0ff;
      color: #1865f2;
    }

    &:hover {
      background-color: #f1f2f0;
    }
  }
}

>>> .icon-ym {
  font-size: 12px !important;
}
</style>